<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <!--      搜索组件-->
      <SearchModle dataKey="applyBook" @searchFn="searchFn"></SearchModle>
      <!--      end-->
      <div class="applyBox">
        <span class="titlebook">请勾选借阅书名：</span><span class="applycart" @click="showApplyCart"><i
          class="iconfont icontushu"></i><span>共{{ applyBookBoxNumber.length }}本,点击查看</span></span>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableStripe"
              :border="tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c"
              @selection-change="handleSelectionChange"
              @select-all="selectAll"
              @select="selectFnBox"
              @row-click="rowClick">
            <el-table-column
                type="selection"
                width="50">
            </el-table-column>
            <el-table-column
                prop="name"
                label="图书名称">
            </el-table-column>
            <el-table-column
                prop="editor"
                label="作者">
            </el-table-column>
            <el-table-column
                prop="cat_name"
                label="类目"
                width="120">
            </el-table-column>
            <el-table-column
                prop="position"
                label="位置"
                width="80">
            </el-table-column>
            <el-table-column
                prop="read_number"
                label="可借库存"
                width="100">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
      <!--编辑界面-->
      <applyBookcart :visible.sync="cartVisible" :eidtOption="applyBookBox" @detelBook="detelBook"
                     @submitApplyBook="submitApplyBook"></applyBookcart>
    </div>
  </div>

</template>

<script>
import {pagination, yearDayLine} from '@/utils/util.js'
import applyBookcart from '@/components/dialog/applyBookcart.vue'

export default {
  components: {
    applyBookcart
  },
  data() {
    return {
      cartVisible: false,
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      // 页数
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      centerDialogVisible: false,
      handleSelection: [], // checked选中框
      applyBookBox: {}, // 选中图书信息
      applyBookBoxInit: {}, // 本页面对应对象
      applyBookBoxNumber: [],
      // 搜索组件
      searchForm: {}
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      let _this = this
      this.searchForm.p = this.page.pageindex
      this.$fetch(this.api.admin_read_book, this.searchForm).then((response) => {
        console.log('数据：', response)
        if (response.code === 0) {
          this.arryList = response.list.data
          this.page.total = response.list.total
          let applyBookBoxInit = {}
          for (let i = 0; i < response.list.data.length; i++) {
            response.list.data[i].applynumber = 1
            applyBookBoxInit[response.list.data[i].id] = response.list.data[i]
          }
          this.applyBookBoxInit = applyBookBoxInit
          _this.$nextTick(function () {
            _this.checked() // 每次更新了数据，触发这个函数即可。
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 搜索组件
    searchFn(option) {
      this.page.pageindex = 1
      this.searchForm = option
      this.InitFn()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 选项发生变化
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    // 点击全选
    selectAll(val) {
      // 全选所有跟空值，即使页面已经选择2项
      console.log('点击全选', val)
      console.log(val) // 所有选中值
      let applyBookBox = this.applyBookBox
      if (val.length !== 0) {
        // this.handleSelection = val
        for (let i = 0; i < val.length; i++) {
          if (!applyBookBox[val[i].id]) {
            // 不存在图书
            applyBookBox[val[i].id] = val[i]
          }
        }
      } else {
        // 清除所有 arryList
        for (let i = 0; i < this.arryList.length; i++) {
          if (this.applyBookBox[this.arryList[i].id]) {
            // 存在图书删除
            delete applyBookBox[this.arryList[i].id]
          }
        }
      }
      this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
      this.applyBookBoxNumber = Object.keys(this.applyBookBox)
    },
    // 点击单选
    selectFnBox(val) {
      // 选择的是当前所有的选中，还需要比对未选中项 applyBookBoxInit
      console.log('本页面的列表数据', this.applyBookBoxInit)
      console.log('点击单选', val)
      let applyBookBox = this.applyBookBox
      if (val.length !== 0) {
        // 有选项 对本页面的选项进行比对
        let valBox = {}
        for (let i = 0; i < val.length; i++) {
          valBox[val[i].id] = val[i]
        }
        for (let i in this.applyBookBoxInit) {
          if (valBox[i]) {
            // 存在图书删除
            applyBookBox[i] = this.applyBookBoxInit[i]
          } else {
            delete applyBookBox[i]
          }
        }
      } else {
        // 清除所有 arryList
        for (let i in this.applyBookBoxInit) {
          delete applyBookBox[i]
        }
      }
      this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
      this.applyBookBoxNumber = Object.keys(this.applyBookBox)
    },
    // 单行选中
    rowClick(row, column, event) {
      console.log('行：', this.applyBookBox)
      if (!this.applyBookBox[row.id]) {
        this.applyBookBox[row.id] = row
      } else {
        delete this.applyBookBox[row.id]
      }
      this.applyBookBoxNumber = Object.keys(this.applyBookBox)
      let that = this
      this.$nextTick(function () {
        that.checked() // 每次更新了数据，触发这个函数即可。
      })
    },
    detelBook(optionid) {
      let applyBookBox = this.applyBookBox
      console.log('shan删除的对象：', applyBookBox)
      delete applyBookBox[optionid]
      this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
      this.applyBookBoxNumber = Object.keys(this.applyBookBox)
      this.InitFn()
    },
    async submitApplyBook(option) {
      console.log('option:', option) // {time:this.value1,option:this.arryList}
      // return
      let dataOption = []
      if (!option.time) {
        this.$message.error('请选择预还书日期')
        return
      }
      let n = this
      for (let i in option.option) {
        let list_ = {}
        list_.id = option.option[i].id
        list_.number = option.option[i].applynumber
        dataOption.push(list_)
      }
      console.log('断点2')

      let data = await this.$post('read/add', {
        list: JSON.stringify(dataOption),
        return_time: option.time
      })
      console.log('data-oo:',data)
      if (!data.code) {
        n.$refs.multipleTable.clearSelection()
        n.centerDialogVisible = false
        n.cartVisible = false
        n.applyBookBox = {} // 更新视图对象
        n.applyBookBoxNumber = []
        console.log('断点11')
        n.InitFn()
        n.$alert('申请成功，等待管理员准备图书，到图书馆领取！', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
      } else {
        console.log('请求失败')
        this.$message.error(data.msg)
      }
    },
    // 设置默认选中
    checked() {
      for (let i = 0; i < this.arryList.length; i++) {
        if (this.applyBookBox[this.arryList[i].id]) {
          this.$refs.multipleTable.toggleRowSelection(this.arryList[i], true)
        } else {
          this.$refs.multipleTable.toggleRowSelection(this.arryList[i], false)
        }
      }
    },
    showApplyCart() {
      if (this.applyBookBoxNumber.length) {
        this.cartVisible = true
      } else {
        this.$message.error('请选择申请借阅的书籍')
      }
    }
  },
  mounted() {
  }
}
</script>
